<template>
  <!-- 技术生命周期 -->
  <div>
    <div style="width:1000px;height:500px;margin:0 auto" id="smzq" class="chart"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt } from "@/utils/utils";
export default {
  name:'SMZ',
  mixins: [resize],
  props: {
    chartId: {
      type: String,
    },
    chartsData: {},
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
    };
  },
  computed: {
    ...mapState(["techAnalysisKeyWords"]),
  },  
  watch: {
    chartsData(val){
      this.getData()
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById('smzq'));
    this.getData()
  },
  methods: {
    //发起请求
    getData(){
      let listArray = []
      this.chartsData.map(item => {
        listArray.push([item[1].pn_len,item[1].author_len,item[0]])
      })
      this.init(listArray);
    },
    init(data) {
      let option = {
        tooltip: {
          // position: "top",
          // formatter: (params) => {
          //   return `相关度：${series[params.dataIndex]}`;
          // },
        },
        grid: {
          left: 20,
          right: 20,
          top: 20,
          containLabel: true,
          bottom: 10,
        },
        xAxis: {
          // axisLabel: {
          //   show: false,
          // },
        },
        yAxis: {
          // axisLabel: {
          //   show: false,
          // },
        },
        series: [
          {
            type: "line",
            label: {
              show: true,
              formatter: data => {
                return data.data[2]
              }
            },
            data: data,
          },
        ]
      };

      this.chart.setOption(option);

      this.$emit("chartDom", this.chart);
    },
    getEchartImg(base) {
      window.echartImg = base;
    },
  },

  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>